/**
 * Created by sunyan on 2017/7/12.
 */
var d3 = require("d3");
let chart = {
  insertChart(box,chart,url,para){
    var that = this;
    $.ajax({url:url,
      type:"get",
      data:para,
      dataType:"json"
    }).then((res) => {
      console.log(res)
      var res = res.data
      if(!res){
        console.log('没有散点图数据',url)
        return
      }
      that.res = {
        lineData:res.lineData,
        axisX:res.axisX*1.1,
        axisY:res.axisY*1.1
      }
      if(res.dotData)that.res.dotData = res.dotData || '';
      if(res.scrapYear)that.res.scrapYear = res.scrapYear.toString() || ""
      if(res.equipmentValueMin)that.res.equipmentValueMin = res.equipmentValueMin.toString() || ""
      if(res.equipmentValueMax)that.res.equipmentValueMax = res.equipmentValueMax.toString() || ""
    }).then(function () {
      window.config.promiseStep++;
      console.log('加1了:  散点图')
      that.draw(box,chart,that.res)
    })
  },
  draw(box,chart,json){
    let data = json;
    if(!chart){
      console.log('没有获取到图表dom',chart)
      return
    }
    if(!json){
      console.log('没有获取到图表数据')
      return
    }

    if(data.scrapYear){
      $('#scrapYear').html(this.splitData(data.scrapYear)).siblings('.spanMark').css('display','block')
    }
    if(data.equipmentValueMin){
      $('#equipmentValueMin').html(this.splitData(data.equipmentValueMin)).siblings('.spanMark').css('display','block')
    }
    if(data.equipmentValueMax){
      $('#equipmentValueMax').html(this.splitData(data.equipmentValueMax)).siblings('.spanMark').css('display','block')
    }
    d3.select("#"+chart).select('.g-chart').remove()
    let margin = {top: 10, right: 25, bottom: 15, left: 45};
    let w  = document.getElementById(box).offsetWidth,
        h  = document.getElementById(box).offsetHeight;
    // debugger
    let cw = w - margin.left - margin.right,
        ch = h - margin.top - margin.bottom;
    let x = d3.scaleLinear()
      .domain([0, data.axisX])
      .range([0, cw]);

    let y = d3.scaleLinear()
      .domain([0, data.axisY])
      .range([ch, 0]);
    let svg = d3.select("#"+chart)
      .attr("width", w)
      .attr("height",h)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .attr("class","g-chart");

    svg.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + ch + ")")
        .call(d3.axisBottom(x).tickSize(-ch).ticks(5))
        .append("text")
        .attr("x", cw)
        .attr("y", 10)
        .style("font-weight", "normal")
        .style("text-anchor", "middle")

    svg.append("g")
        .attr("class", "axis axis--y")
        .call(d3.axisLeft(y).tickSize(-cw).ticks(5))
        .append("text")
        .attr("x", 3)

    d3.select('#'+box).selectAll('text').attr('fill', '#74dafd')

    d3.selectAll("line").attr("stroke","#70DAFD").attr('opacity',0.5)
    d3.selectAll('.domain').attr("stroke","#70DAFD").attr('opacity',0)

    if(data.dotData){
      svg.append("g").attr("class","dots")
      svg.select(".dots").selectAll(".dot")
        .data(data.dotData)
        .enter().append("circle")
        .attr("class", "dot")
        .attr("r", 2)
        .attr("cx", function(d) { return x(d.x); })
        .attr("cy", function(d) {return y(d.y); })
        .style("fill", function() { return "#70DAFD"; });
    }else{
      console.log('m没有dot')
    }


    var line = d3.line()
      .x(function(d) { return x(d.x); })
      .y(function(d) { return y(d.y); })
      .curve(d3.curveCatmullRom.alpha(0.5));
    var area = d3.area()
      .x(function(d) {
        return x(d.x);
      })
      .y1(function(d) {
        return y(d.y);
      })
      .y0(y(0))
      .curve(d3.curveCatmullRom.alpha(0.5));
    svg.append("g")
      .attr("class","area_block")
      .append("path")
      .datum(data.lineData)
      .attr("fill", "none")
      .attr("stroke", "#70DAFD")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 2)
      .attr("d", line);
    svg.append("g")
      .attr("class","area_block")
      .append("path")
      .datum(data.lineData)
      .attr("fill", "url(#grad1)")
      .attr("d", area);
  },
  splitData(data){
    var arr = data.split("");
    var dom = '';
    for(var k = 0; k < arr.length; k++){
      dom += '<span>'+arr[k]+'</span>';
    }
    return dom;
  }
}
module.exports = {chart}
